<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>watch-侦听器</p>
    <input type="text" v-model="val">
    <p>{{val}}</p>
    <hr>
    <input type="text" v-model="person.age">
    <p>{{person.age}}</p>
    <input type="text" v-model="age">
    <button @click="age ++ ">长大一岁</button>
    <p>{{content}}</p>
    <hr>
    <input type="text" v-model="color">
    <button @click="color ++ ">变漂亮</button>
    <h1>{{text}}</h1>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        val: '1',
        person: {
          age: 18,
          job: 'stu'
        },
        age: 10,
        content: '小朋友，送你一朵小红花',
        text: '小丑竟是我自己',
        color: 58
      },
      watch: {
        // 浅监听
        val(newVal, oldVal) {
          console.log(newVal, oldVal);
          console.log('我发生了变化！');
        },
        age(newVal, oldVal) {
          if(this.age < 18) {
            this.content = '小朋友，送你一朵小红花';
          }else if(this.age >= 18  && this.age < 30) {
            this.content = '打工人，打工魂，打工人是人上人';
          }else {
            this.content = '回家养老';
          };
        },
        // 监听颜值的变化
        color(val) {
          if(this.color < 60) {
            this.text = '小丑竟是我自己';
          }else if(this.color > 60 && this.color < 80) {
            this.text = '想送你回家的人，天南地北都顺路';
          }else if(this.color > 80 && this.color < 90) {
            // 邂逅易烊千玺
            this.meetYYQX();
          }else if(this.color > 90 && this.color < 95) {
            // 易烊千玺坠入爱河
            this.YYQXLove();
            // 发微博官宣，微博宕机
            this.hotDown();
          }
        },
        // 深监听
        person: {
          // 回调函数
          handler(newVal) {
            console.log('newVal:', newVal.age);
            console.log('我发生了变化！handlerhandlerhandler');
          },
          // 深监听
          deep: true
        }
      },
      methods: {
        meetYYQX() {
          this.text = '有空一起拍戏'
        },
        YYQXLove() {
          this.text = '官宣了！！'
        },
        hotDown() {
          this.text += '微博宕机...'
        },
      },
    })
  </script>
</body>
</html>